<template>
  <div>
    <a-button type="primary" @click="showModal">报告事件</a-button>

    <a-modal v-model:visible="visible" :title="modal" @ok="handleOk">
      <a-form
        autocomplete="off"
        :model="formState"
        name="validate_other"
        v-bind="formItemLayout"
      >
        <a-form-item
          name="select"
          label="事件类型"
          has-feedback
          :rules="[{ required: true, message: '请选择事件类型' }]"
        >
          <a-select
            v-model:value="formState.select"
            placeholder="请选择事件类型"
          >
            <a-select-option value="拥堵">拥堵</a-select-option>
            <a-select-option value="刮擦">刮擦</a-select-option>
            <a-select-option value="翻车">翻车</a-select-option>
            <a-select-option value="碰撞">碰撞</a-select-option>
            <a-select-option value="失火">失火</a-select-option>
            <a-select-option value="碾压">碾压</a-select-option>
            <a-select-option value="其他">其他</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          :rules="[{ required: true, message: '请添加事件地点' }]"
          :name="address"
          label="事件地点"
        >
          <a-input v-model:value="formState.address" />
        </a-form-item>
        <a-form-item
          :name="mark"
          label="标志性建筑"
          :rules="[{ required: true, message: '请添加标志性建筑' }]"
        >
          <a-input v-model:value="formState.mark" />
        </a-form-item>
        <a-form-item
          :name="describe"
          label="事件详情"
          :rules="[{ required: true, message: '请添加事件详情' }]"
        >
          <a-textarea v-model:value="formState.describe" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup>
import http from '@/request/event.js'
import { defineComponent, ref, reactive, defineExpose } from 'vue'
// store部分
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/useUserStore.js'
const userStore = useUserStore()
const { username, userType, user_id } = storeToRefs(userStore)

let modal = ref('')
const formState = reactive({
  // id有 localStorage返回,这里需要修改,登录页面还没做好,先用假的
  // username localStorage返回 这里先用固定的

  id: user_id.value,
  address: '',
  describe: '',
  select: '',
  mark: '',
})
const visible = ref(false)
const showModal = () => {
  modal.value = '报告事件'
  visible.value = true
}

const handleOk = (e) => {
  console.log(e)

  // 发送报告事件请求
  http.postEvent(formState)
  visible.value = false
  formState.address = ''
  formState.describe = ''
  formState.select = ''
  formState.mark = ''
}
const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
}

defineExpose({ showModal })
</script>
